<template>

  <div class="topBox">
    <div class="L"><a href="index.html">LOGO</a></div>
    <div class="R">
      <a href="map.html"><img src="/assets/images/map.png"></a>
    </div>
  </div>

<van-swipe v-if="top" class="my-swipe" :autoplay="3000" indicator-color="#4169E1">
  <van-swipe-item v-for="(item,key) in top" :key="key">
    <van-image
      width="100%"
      height="300"
      fit="cover"
      :src="item.thumbs_text"
      @click="TopInfo(item.id)"
    />
  </van-swipe-item>
</van-swipe>

  <div class="lqgwBox">
    <ul>
      <li>
        <router-link to="/product/index">
          <img src="/assets/images/quanbu.png">
          <p>全部商品</p>
        </router-link>
      </li>
      <li><a href="live.html"><img src="/assets/images/zibo.png">
          <p>商品直播</p>
        </a></li>
      <li><a href="coupon.html"><img src="/assets/images/youhui.png">
          <p>优惠活动</p>
        </a></li>
      <li><a href="ranking.html"><img src="/assets/images/bandan.png">
          <p>榜单排行</p>
        </a></li>
    </ul>
  </div>

  <div class="contitbox">
    <p>新品<span>•</span>推荐</p>
  </div>

  <ul class="proul" v-if="news">
    <li v-for="(item,key) in news" :key="key">
      <div class="con">
        <router-link :to="{path:'/product/info',query:{proid:item.id}}">
          <van-image
            width="100%"
            height="200"
            fit="cover"
            :src="item.thumbs_text"
          />
          <p><span>￥</span>{{item.price}}</p>
        </router-link>
      </div>
    </li>
  </ul>

  <tabbar />
</template>

<script setup>
import tabbar from '@/components/common/tabbar.vue'

const { proxy } = getCurrentInstance()

// 创建数据
let top = ref([])
let news = ref([])

// 生命周期
onBeforeMount(() => {
  ProductData()
})

// 查询数据
const ProductData = async () => {
  var result = await proxy.$POST({ url: '/index/index' })

  if (result.code == 0) {
    proxy.$fail(result.msg)
    return false
  }

  top.value = result.data.top
  news.value = result.data.news
}

// 轮播图跳转
const TopInfo = (proid) => proxy.$router.push({path:'/product/info',query:{proid}})
</script>
